import { innerUrls } from '@/shared/constants/urls';
import Icon from '@/shared/icons/logo/logo.svg';
import Text from '@/shared/icons/logo/companyName.svg';
import Image from 'next/image';
import Link from 'next/link';

import cs from './Logo.module.scss';

function LogoContent({ withText }: { withText: boolean }) {
  return (
    <>
      <Image alt="Logo" className={cs.logo} draggable="false" height={44} src={Icon} width={44} />
      {withText && (
        <Image alt="Logo" className={cs.text} draggable="false" height={29.334} src={Text} width={116.417} />
      )}
    </>
  );
}

interface Props {
  withText?: boolean;
  asLink?: boolean;
}
export const Logo = ({ withText = false, asLink }: Props) =>
  asLink ? (
    <Link className={cs.wrapper} data-testid="logo" href={innerUrls.main}>
      <LogoContent withText={withText} />
    </Link>
  ) : (
    <div className={cs.wrapper}>
      <LogoContent withText={withText} />
    </div>
  );
